<template>
  <div class="body_box">
    <ul class="container">
      <li
        class="container-item"
        v-for="item in 18"
        :key="item"
        @click="goGame(item)"
      >
        1
      </li>
    </ul>
  </div>
  <game2048 :open="openGame2048" />
</template>

<script setup>
import { ref, provide } from "vue";
import { useRouter } from "vue-router";
import game2048 from "./game2048/index.vue";
import { TRUE } from "sass";
const router = useRouter();
const openGame2048 = ref(false);

const goGame = (item) => {
  console.log(item);
  openGame2048.value = true;
  console.log(openGame2048.value);
};
provide("openGame", openGame2048);
</script>
<style lang="scss" scoped>
.body_box {
  padding: 0;
  margin: 0;
  display: flex;
  .container {
    display: inline-grid;
    grid-template-columns: repeat(auto-fill, 9.375rem);
    white-space: nowrap;
    justify-content: center;
    gap: 0.625rem; /* 间距 */
    width: 100%;
    .container-item {
      width: 9.375rem;
      height: 10.5rem;
      margin-right: 0.625rem;
      background-color: #859aff;
      // border: 1px solid #a36262;
      background-color: transparent;
      border: 2px solid transparent;
      box-shadow: 0 0px 0.3125rem rgba(0, 0, 0, 0.9);
      border-radius: 1.25rem;
      text-align: center;
      line-height: 9.375rem;
      font-family: "Lines";
      font-size: 1.5625rem;
    }
    .container-item:hover {
      transform: scale(1.2);
      background-color: #859aff;
    }
  }
}
::v-deep .ant-modal .ant-modal-content {
  padding: 0 !important;
  border-radius: 0 !important;
}
::v-deep .ant-modal {
  background-color: #1890ff !important;
  padding: 0 !important;
}
</style>
